<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart height="254" :data="data" :scale="scale" :forceFit="true" :padding="['auto', 'auto', '40', '50']">
      <v-tooltip />
      <v-axis />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
const tooltip = [
  'x*y',
  (x, y) => ({
    name: x,
    value: y,
  }),
]
const scale = [
  {
    dataKey: 'x',
    title: '日期(天)',
    alias: '日期(天)',
    min: 2,
  },
  {
    dataKey: 'y',
    title: '流量(Gb)',
    alias: '流量(Gb)',
    min: 1,
  },
]

export default {
  name: 'Bar',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      data: [],
      scale,
      tooltip,
    }
  },
  created() {
    this.getMonthBar()
  },
  methods: {
    getMonthBar() {
      this.$http.get('/analysis/month-bar').then((res) => {
        this.data = res.result
      })
    },
  },
}
</script>
